<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECharts map Demo</title>
</head>


<body>
	<div id="skills" style="height: 500px;">
		在不引入jquery情况下实现异步请求
	</div>
</body>
<!-- <script src="/js/jquery-3.3.1.min.js"></script> -->

<script type="text/javascript">
    var xmlHttp = false;

    //创建HttpRequest对象

    function createXmlHttpRequest() {
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e2) {
                xmlHttp = false;
            }
        }
        if (!xmlHttp && typeof XMLHttpRequest != "udefined") {
            xmlHttp = new XMLHttpRequest();
        }
    }

    function Call() {
        //先创建XMLHttpRequest的对象
        createXmlHttpRequest();
        //这里可以传递参数
        var url = "Handler.ashx";
        //xmlHttp.open("GET", url, false);
         xmlHttp.open("post", url, true);
        //制定回调函数
        xmlHttp.onreadyStateChange = callBackMethod;
        //发送
        xmlHttp.send(null);
    }

    //回调函数 
    function callBackMethod() {
        if (xmlHttp.readyState == 4) {
            if (xmlHttp.status == 200) {//http请求一切正常
                alert("请求以完成 结果：" + xmlHttp.responseText + "看看按钮的值变了没"); //respneseText就是返回值
               // document.getElementById("Button1").value = xmlHttp.responseText;
            } else {
                alert("Not able to retrieve description" + XMLHttpReq.statusText);
            }
        } else {
            switch (xmlHttp.readyState) {
                case 0:
                    alert("未初始化 还没有调用send()方法");
                    break;
                case 1:
                    alert("载入 已调用send()方法，正在发送请求");
                    break;
                case 2:
                    alert("（载入完成）send()方法执行完成，已经接收到全部响应内容");
                    break;
                case 3:
                    alert("（交互）正在解析响应内容");
                    break;
            }
        }
    }
    
   /*  =================================================================== */
    //http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_send.asp
    //创建HttpRequest对象
    function createXMLHTTP() {
    	var xmlHttp = false;
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e2) {
                xmlHttp = false;
            }
        }
        if (!xmlHttp && typeof XMLHttpRequest != "udefined") {
            xmlHttp = new XMLHttpRequest();
        }
        return xmlHttp;
    }
   
    var xmlReq = createXMLHTTP();//创建一个xmlhttprequest对象
    function testAsynRequest() {
        var url = "json/skills.json";
        //method：请求的类型；GET 或 POST,url：文件在服务器上的位置,async：true（异步）或 false（同步）
        xmlReq.open("post", url, true);
        xmlReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        //回调函数
        xmlReq.onreadystatechange = function () {
            if (xmlReq.readyState == 4) {
                if (xmlReq.status == 200) {
                	alert("========="+xmlReq.responseText);
                    var jsonData = eval('(' + xmlReq.responseText + ')');
                    consoleLog(jsonData);
                    //alert(jsonData.message);
                }
                else if (xmlReq.status == 404) {
                    alert("Requested URL is not found.");
                } else if (xmlReq.status == 403) {
                    alert("Access denied.");
                } else {
                    alert("status is " + xmlReq.status);
                }
            }
        };
        xmlReq.send(null);
    }
    
    
    /*  =================================================================== */
    function myfunction(){
    	alert("自动加载");
    }
    /*  =================================================================== */
   
    function consoleLog(message){
		if (typeof console != 'undefined' && console.log) console.log(message);
    }
    
    /*  =================================================================== */
    window.onload = testAsynRequest();//可不加括号
</script>

</html>



<!-- 一、js方法:

1.在body标签加onload属性；
例：<body onload="myfunction()">

2.window.onload方法
例：　　
<script type="text/javascript">

function myfunction(){

　　alert("自动加载");

}

window.onload = myfun();//可不加括号

</script>



二、jQuery方法：
1.window.onload =function() {alert("自动加载");}
2.$(document).ready(function() { alert("自动加载");});
3.$(function() {}); -->